<template>
    <el-dialog 
    v-model="visible" 
    :title="title" 
    :width="width"
    :close-on-click-modal="false" 
    :close-on-press-escape="true"
    @closed="resetForm">
        <slot name="main"></slot>
        <slot name="footer"></slot>
        <SubmitButton :submitBtnVisible="submitBtnVisible" :text="buttonText" @buttonHandle="handleClick"></SubmitButton>
    </el-dialog>
</template>

<script setup>
import SubmitButton from '@/components/animation/submit-button/submit-button.vue';
// ========================= 接收值 =========================
const props = defineProps({
    // 弹框控制
    visible: {
        type: Boolean,
        default: false
    },

    // 弹框标题
    title: {
        type: String,
        default: ''
    },

    // 弹框高度
    width: {
        type: String,
        default: '30%'
    },

    // 按钮是否显示
    submitBtnVisible: {
        type: Boolean,
        default: false
    },

    // 按钮文本
    buttonText: {
        type: String,
        default: '提交'
    }
});

// ========================= 计算属性 =========================
// 使用计算属性模拟双向绑定
const visible = computed({
    get() {
        return props.visible
    },
    set(value) {
        emit('update:visible', value)
    }
});


// ========================= 向父组件传值 =========================
const emit = defineEmits(['update:visible', 'handleClick', 'resetForm']);
function handleClick() {            // 点击确定
    emit('update:visible', false);
    emit('handleClick');
};
// 弹框关闭后
function resetForm() {
    emit('resetForm');
};
</script>

<style lang="scss" scoped>
</style>